<template>
	<view class="page">
		<view class="g-product-list">
		    <view class="g-product" v-for="(item,index) in data" :key="index">
		        <view class="g-product-pic">
		            <image :src="item.goods_img" mode="widthFix"></image>
		        </view>
		        <view class="g-product-info">
		            <view class="u-product-name f-two-ellipsis">{{item.goods_name}}</view>
		            <view class="small-text">购买总价：<text>￥{{item.all_money}}</text></view>
					<view class="small-text">购买数量：{{item.buy_num}}</view>
		            <view class="small-text">购买时间：{{item.create_time}}</view>
					<view class="small-text" v-if="item.pay_status == 1">获得红包：<text>￥{{item.red_envelope}}</text></view>
					<block v-if="item.pay_status == 1">
						<view class="small-text" v-if="item.is_winning == 1">领取状态：{{item.want_shop_text}}</view>
						<view class="btns">
							<view v-if="item.is_winning == 1 && item.want_shop == 0" @tap="goUrl(item.goods_id,item.id)" class="text win">领取奖品</view>
							<text v-if="item.draw_red" class="text win" @tap="pickRedpack(item.id)">领取红包</text>
							<text v-if="item.is_winning == 1 && item.want_shop == 0" class="text lose" @tap="giveUpGoods(item.id)">放弃奖品</text>
						</view>
					</block>
					<block v-if="item.pay_status == 0">
						<view class="small-text">支付状态：{{item.pay_status_text}}</view>
					</block>
		        </view>
		        <image v-if="item.is_winning == 1" class="u-product-status " src="../../static/icons/user/winning.png" mode="widthFix"></image>
		    </view>
			
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow" />
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
			<view class="lottery-redpack">
				<image class="lottery-redpack-bg" src="../../static/images/lottery_draw/redpack_bg.png"></image>
				<!-- <image class="lottery-redpack-open" v-if="isShowOpen" :class="{'open-animation':isOpen}" @tap="openAnimation" src="../../static/images/lottery_draw/redpack_open.png"></image> -->
				<uni-transition :duration="500" :mode-class="modeClass" :show="true" class="lottery-redpack-tips">
					<view class="lottery-redpack-tips-text">获得红包</view>
					<view class="lottery-redpack-tips-money">￥{{redPackMoney}}</view>
				</uni-transition>
				<image class="lottery-redpack-close" src="../../static/icons/jewel/sign_close.png" @tap="close"></image>
			</view>
		</uni-transition>
		<!-- <view class="redPackRain" v-if="transShow"><image src="../../static/images/lottery_draw/redrain.gif"></image></view> -->
	</view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
	export default {
	    data() {
	        return {
	            data:[],
				page:1,
				total_pages:1,
				showLoading: false,
				showNodata: false,
				loadMoreStatus:1,
				modeClass:['fade'],
				transShow:false,
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				isOpen:false,
				isShowOpen:true,
				isShowMoney: false,
				redPackMoney:0,
				pickRedid:''
	        }
	    },
		methods:{
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.page <= that.total_pages){
					henglang.post('Lottery/getDrawBuyLogList',{page:that.page},true,function(res){
						if(res.data.code == 0){
							if(type == 'loadMore'){
								that.data = that.data.concat(res.data.data)
							}else{
								that.data = res.data.data
								that.total_pages = res.data.total_pages
								that.loadMoreStatus = that.total_pages < 2 ? 2:0
							}
						}else{
							henglang.showToast(res.data.msg)
						}
					});
				}else{
					that.loadMoreStatus = 2
				}
			},
			giveUpGoods(id){
				let that = this
				henglang.post('Lottery/noBuyProducts',{id:id},true,function(res){
					if(res.data.code == 0){
						that.page = 1
						that.getData()
					}
				})	
			},
			goUrl(goods_id,id){
				uni.navigateTo({
					url:'/pages/user/lottery_draw_show?goods_id='+goods_id+'&record_id='+id
				})
			},
			openAnimation(){
				let that = this
				that.isOpen = true
				henglang.post('Lottery/getDrawRed',{id:that.pickRedid},true,function(res){
					that.redPackMoney = res.data.data.money
				})
				setTimeout(()=>{
					that.isShowOpen = false
				},2000)
			},
			close() {
				this.transShow = !this.transShow
				this.getData()
			},
			open(mode) {
				this.modeClass = mode
				this.transShow = !this.transShow
			},
			pickRedpack(id){
				let that = this
				that.pickRedid = id
				that.open(['zoom-in','fade'])
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		},
		onNavigationBarButtonTap({index}) {
		    if (index == 0) {
				uni.navigateTo({
					url:'/pages/user/hlb_bill?state=8'
				})
		    }
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	/* 产品 */
	.g-product-list {
	    padding: 10px;
	}
	
	.g-product {
	    border-radius: 3px;
	    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	    margin-bottom: 10px;
	    display: flex;
	    padding: 10px;
	    position: relative;
	}
	
	.g-product-pic {
	    width: 190upx;
	    height: 190upx;
	    overflow: hidden;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-right: 10px;
	}
	.g-product-pic image{
		width: 100%;
		height: 100%;
	}
	.g-product-info {
	    flex: 1;
	    position: relative;
	}
	.g-product-info .btns .text{
		width: 130rpx;
		line-height: 48rpx;
		display: inline-block;
		border-radius: 30px;
		text-align: center;
		color: #FFFFFF;
		margin: 20rpx;
		margin-left: 0;
		margin-bottom: 0;
		font-size: 24rpx;
	}
	.g-product-info .btns .win{
		background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
	}
	.g-product-info .btns .lose{
		border: 1px solid gray;
		color: #000000;
	}
	.g-price {
	    font-size: 24upx;
	    margin-bottom: 5px;
	}
	
	.g-price text {
	    font-size: 40upx;
		color: #d71311;
	}
	
	.small-text {
	    color: #828080;
	}
	.small-text text{
		color: #d71311;
	}
	.u-product-name {
		height: 82upx;
		line-height: 41upx;
	}

	.u-product-status {
	    width: 118upx;
		height: 99upx;
	    position: absolute;
	    right: 10px;
	    top: 80upx;
	}
	.lottery-redpack{
		width: 700rpx;
		height: 1245rpx;
		position: relative;
		z-index: 10;
		&-bg{
			width: 700rpx;
			height: 1245rpx;
		}
		&-open{
			position: absolute;
			z-index: 1;
			top: 257rpx;
			left: 50%;
			margin-left: -126rpx;
			width: 257rpx;
			height: 259rpx;
		}
		&-tips{
			position: absolute;
			z-index: 1;
			width: 100%;
			top: 500rpx;
			text-align: center;
			&-text{
				font-size: 57rpx;
				color: #ebae38;
			}
			&-money{
				font-size: 125rpx;
				color: #fbd41f;
				text-shadow:0px 4px 0px rgba($color: #5f5f5f, $alpha: 0.34);
			}
		}
		&-close{
			width: 86rpx;
			height: 86rpx;
			display: block;
			position: absolute;
			bottom: 300rpx;
			left: 50%;
			margin-left: -43rpx;
		}
		.open-animation{
			animation: trun 0.8s infinite;
		}
	}
	@keyframes trun
	{
		0%{ 
		  transform: rotateY(0deg);
		}
		50%{
		  transform: rotateY(180deg);
		}
		100% {  
		  transform: rotateY(360deg);
		}
	}
	.redPackRain{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
